<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 30px;" >
      <!--标题区-->
      <div slot="header" class="clearfix">
        <span style="color: #1c84c6">已关联试题</span>
      </div>
      <!--搜索区-->
      <el-form :model="relatedQuestionsForm" ref="relatedQuestionsForm" :inline="true">
        <el-form-item label="题目类别" prop="category">
          <el-select size="small" @change="handleQuery"  v-model="relatedQuestionsForm.category" placeholder="请选择试题类别">
            <el-option v-for="item in questionCategoryOptions" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!--按钮区-->
      <el-row style="padding-bottom: 10px">
        <el-button type="danger" icon="el-icon-bottom" size="mini"
          @click="unRelated" :disabled="relatedQuestionsMultiple">解绑</el-button>
      </el-row>
      <!--表格区-->
      <el-table :data="relatedQuestionsDataList" row-key="id"
                height="270" :reserve-selection="true" v-loading="relatedLoading"
                @selection-change="handleRelatedSel">
        <el-table-column type="selection" width="55" align="center" />
<!--        <el-table-column label="序号" align="center" prop="id" width="80"/>-->
        <el-table-column label="题目" align="center" prop="content" :show-overflow-tooltip="true"/>
        <el-table-column label="题目类型" align="center" prop="type" :formatter="questionTypeFormat"/>
        <el-table-column label="题目类别" align="center" prop="category" :formatter="questionCategoryFormat"/>
        <el-table-column label="正确答案" align="center" prop="answer"/>
<!--        <el-table-column label="题目分数" align="center" prop="score"/>-->
      </el-table>

      <pagination v-show="relatedQuestionsTotal > 0" :total="relatedQuestionsTotal"
                  :page-sizes="[5, 10, 20, 30]" :page.sync="relatedQuestionsForm.pageNum"
                  :limit.sync="relatedQuestionsForm.pageSize" @pagination="getRelatedQuestionsList"/>
    </el-card>

    <el-card class="box-card">
      <!--标题区-->
      <div slot="header" class="clearfix">
        <span style="color: peru">未关联试题</span>
      </div>
      <!--搜索区-->
      <el-form :model="unrelatedQuestionsForm" ref="unrelatedQuestionsForm" :inline="true">
        <el-form-item label="题目类别" prop="category">
          <el-select size="small" @change="unHandleQuery"  v-model="unrelatedQuestionsForm.category" placeholder="请选择试题类别">
            <el-option v-for="item in questionCategoryOptions" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="unHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="unResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!--按钮区-->
      <el-row style="padding-bottom: 10px">
        <el-button type="success" icon="el-icon-top" size="mini"
                   @click="related" :disabled="unrelatedQuestionsMultiple">关联</el-button>
      </el-row>
      <!--表格区-->
      <el-table :data="unrelatedQuestionsDataList" row-key="id"
                height="270" :reserve-selection="true" v-loading="unRelatedLoading"
                @selection-change="handleUnRelatedSel">
        <el-table-column type="selection" width="55" align="center" />
<!--        <el-table-column label="序号" align="center" prop="id" width="80"/>-->
        <el-table-column label="题目" align="center" prop="content" :show-overflow-tooltip="true"/>
        <el-table-column label="题目类型" align="center" prop="type" :formatter="questionTypeFormat"/>
        <el-table-column label="题目类别" align="center" prop="category" :formatter="questionCategoryFormat"/>
        <el-table-column label="正确答案" align="center" prop="answer"/>
<!--        <el-table-column label="题目分数" align="center" prop="score"/>-->
      </el-table>

      <pagination v-show="unrelatedQuestionsTotal > 0" :total="unrelatedQuestionsTotal"
                  :page-sizes="[5, 10, 20, 30]" :page.sync="unrelatedQuestionsForm.pageNum"
                  :limit.sync="unrelatedQuestionsForm.pageSize" @pagination="getUnRelatedQuestionsList"/>
    </el-card>
  </div>
</template>

<script>
import {
  getRelatedQuestionsList,
  getUnRelatedQuestionsList,
  relatedQuestions,
  unRelatedQuestions
} from '@/api/regulatory/studySkills'

  export default {
    name : 'relatedQuestions',
    props: ["skillsId"],
    created() {
      //题目类型下拉框赋值
      this.getDicts("questions_type").then(response => {
        this.questionTypeOptions = response.data;
      })
      //题目类别下拉框赋值
      this.getDicts("questions_category").then(response => {
        this.questionCategoryOptions = response.data;
      })
      //获取已关联题目
      this.getRelatedQuestionsList()
      //获取未关联题目
      this.getUnRelatedQuestionsList();
    },
    data() {
      return {
        questionTypeOptions : [], //题目类型下拉框
        questionCategoryOptions : [], //题目类别下拉框

        relatedQuestionsMultiple : true,//关联试题多选禁用
        relatedQuestionsForm : { //关联试题查询参数
          pageNum: 1,
          pageSize: 5,
          skillsId:this.skillsId,
          category : undefined,
        },
        relatedQuestionsDataList:[],//关联试题数据列表
        relatedQuestionsTotal: 0, //关联试题总条数
        relatedSelIds : [], //关联试题选中列
        relatedLoading : true , //关联试题加载图标

        unrelatedQuestionsMultiple : true,//未关联试题多选禁用
        unrelatedQuestionsForm : { //未关联试题查询参数
          pageNum: 1,
          pageSize: 5,
          skillsId:this.skillsId,
          category : undefined,
        },
        unrelatedQuestionsDataList:[],//未关联试题数据列表
        unrelatedQuestionsTotal: 0, //未关联试题总条数
        unrelatedSelIds : [], //未关联试题选中列
        unRelatedLoading : true, //未关联试题加载图标
      }
    },
    methods : {
      /** 题目类型字典回显处理 */
      questionTypeFormat(row) {
        return this.selectDictLabel(this.questionTypeOptions,row.type)
      },
      /** 题目类别字典回显处理 */
      questionCategoryFormat(row) {
        return this.selectDictLabel(this.questionCategoryOptions,row.category)
      },
      /** 查询技能关联试题 */
      getRelatedQuestionsList() {
        this.relatedLoading = true;
        getRelatedQuestionsList(this.relatedQuestionsForm).then(res=> {
          this.relatedLoading = false;
          this.relatedQuestionsDataList = res.data.list;
          this.relatedQuestionsTotal = res.data.total;
        })
      },
      /** 关联试题搜索 */
      handleQuery() {
        this.relatedQuestionsForm.pageNum = 1;
        this.getRelatedQuestionsList();
      },
      /** 关联试题重置 */
      resetQuery() {
        this.$refs["relatedQuestionsForm"].resetFields();
        this.handleQuery();
      },
      /** 查询技能未关联试题 */
      getUnRelatedQuestionsList() {
        this.unRelatedLoading = true;
        getUnRelatedQuestionsList(this.unrelatedQuestionsForm).then(res=> {
          this.unRelatedLoading = false;
          this.unrelatedQuestionsDataList = res.data.list;
          this.unrelatedQuestionsTotal = res.data.total;
        })
      },
      /** 未关联试题搜索 */
      unHandleQuery() {
        this.unrelatedQuestionsForm.pageNum = 1;
        this.getUnRelatedQuestionsList();
      },
      /** 未关联试题重置 */
      unResetQuery() {
        this.$refs["unrelatedQuestionsForm"].resetFields();
        this.unHandleQuery();
      },
      /** 关联列表-多选*/
      handleRelatedSel(selection) {
        this.relatedSelIds = selection.map(item => Number(item.id))
        this.relatedQuestionsMultiple = !selection.length;
      },
      /** 未关联列表-多选*/
      handleUnRelatedSel(selection) {
        this.unrelatedSelIds = selection.map(item => Number(item.id))
        this.unrelatedQuestionsMultiple = !selection.length;
      },
      /** 关联试题 */
      related() {
        relatedQuestions(this.skillsId,this.unrelatedSelIds).then(()=> {
          this.msgSuccess("关联成功");
          this.$emit('relatedQuestionSuccess');
          this.getRelatedQuestionsList();
          this.getUnRelatedQuestionsList();
        })
      },
      /** 解绑试题 */
      unRelated() {
        unRelatedQuestions(this.skillsId,this.relatedSelIds).then(()=> {
          this.msgSuccess("解绑成功");
          this.$emit('relatedQuestionSuccess');
          this.getRelatedQuestionsList();
          this.getUnRelatedQuestionsList();
        })
      }
    }
  }
</script>

<style>

</style>
